<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title><?= $project['name'] ?>翻译录入</title>

    <link href="<?= base_url('assets/css/bootstrap.min.css?v=3.3.6') ?>" rel="stylesheet">
    <link href="<?= base_url('assets/css/font-awesome.css?v=4.4.0') ?>" rel="stylesheet">
    <link href="<?= base_url('assets/css/animate.css') ?>" rel="stylesheet">
    <link href="<?= base_url('assets/css/style.css?v=4.1.0') ?>" rel="stylesheet">

    <link rel="stylesheet" type="text/css"
          href="<?= base_url('assets/js/plugins/jeasyui/themes/default/easyui.css') ?>">
    <link rel="stylesheet" type="text/css" href="<?= base_url('assets/js/plugins/jeasyui/themes/icon.css') ?> ">

</head>


<body class="gray-bg">


<div style="height: 100%; background: white;margin: 20px; padding-top: 20px; padding-bottom: 80px">




    <?php if($project_user_relation['role'] != AppConstants::PROJECT_ROLE_INTERPRETER) :?>
       <button class="btn btn-info " type="button" style="margin-left: 20px" id="btn_key">KEY管理</button>
    <?php endif; ?>




    <button class="btn btn-primary " type="button" id="btn_submit_version"><i class="fa fa-check"></i>&nbsp;提交版本
    </button>

    <button class="btn btn-info " type="button" id="btn_history_version"><i class="fa fa-paste"></i>历史版本</button>
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">显示/隐藏列<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">

            <?php foreach ($columns as $column) : ?>
                <li>
                    <a href="javascript:void(0)">
                        <?= $column['title'] ?>
                        <input type="checkbox" name="cb_column" value="<?= $column['field'] ?>" checked>
                    </a>


                </li>
            <?php endforeach ?>

        </ul>

    </div>





<!--    <button class="btn btn-success " type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;<span-->
<!--            class="bold">导入数据</span>-->
<!--    </button>-->

    <button class="btn btn-success " type="button" id="btn_download"
            ><i
            class="fa fa-download"></i>&nbsp;&nbsp;<span class="bold">导出当前数据</span>
    </button>


    <button class="btn btn-primary " type="button" id="btn_refresh" onclick="reload_data()"><i class="fa fa-refresh"></i>&nbsp;刷新
    </button>


    <p/>



    <style>
        .datagrid-row {
            height: 42px;
            text-align: center;
        }
    </style>


    <table id="dg" class="easyui-datagrid" title="<?= $project['name'] ?>翻译录入 |
     <?php if($project_user_relation['role'] == AppConstants::PROJECT_ROLE_OWNER) :?>
            创建者
        <?php endif;?>

        <?php if($project_user_relation['role'] == AppConstants::PROJECT_ROLE_ADMIN) :?>
            管理员
        <?php endif;?>

        <?php if($project_user_relation['role'] == AppConstants::PROJECT_ROLE_INTERPRETER) :?>
            翻译员
        <?php endif;?> :  <?= $this->session -> userdata('loginname') ?> "
           style="width:100%; height:100%; margin-left: 20px; margin-right: 20px"


    </table>




</div>



<div class="modal inmodal fade" id="submitversionModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="m-t" role="form" id="submitversion_form" action="index.html">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">提交版本</h4>
                </div>

                <div class="modal-body">

                    <div class="form-group"><label>提交语言:</label>


                        <p/>
                        <?php foreach ($langs as $lang) : ?>
                            <?php if ($lang['permission'] == AppConstants::LANG_LANG_PERMISSION_READ_WRITE): ?>
                                <?= $lang['name'] ?>_<?= $lang['shorthand'] ?>
                                <input type="checkbox" name="sub_lang_ids"
                                       value="<?= $lang['id'] ?>"> &nbsp;&nbsp; &nbsp;
                            <?php endif; ?>

                        <?php endforeach ?>


                    </div>


                    <div class="form-group"><label>备注说明</label>
                        <textarea name="vremark" id="vremark" class="form-control" required></textarea>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="btn_dlg_lang_submit">提交版本</button>
                </div>

            </form>
        </div>
    </div>
</div>





<div class="modal inmodal fade" id="downloadModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="m-t" role="form" id="downloadModal_form" action="index.html">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">导出数据</h4>
                </div>

                <div class="modal-body">

                    <div class="form-group"><label>选择语言:</label>


                        <p/>
                        <?php foreach ($langs as $lang) : ?>

                                <?= $lang['name'] ?>_<?= $lang['shorthand'] ?>
                                <input type="checkbox" name="download_lang_ids"
                                       value="<?= $lang['id'] ?>"> &nbsp;&nbsp; &nbsp;

                        <?php endforeach ?>


                    </div>


                        <div class="form-group"><label>选择模板</label>
                            <select name="tpl_id" id="tpl_id" aria-controls="DataTables_Table_0" class="form-control input-sm" >
                                <?php foreach ($templates as $tpl) : ?>
                                <option value="<?=$tpl['id'] ?>"><?=$tpl['name'] ?></option>
                                <?php endforeach ?>
                            </select>
                        </div>



                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" >确定导出</button>
                </div>

            </form>
        </div>
    </div>
</div>





<div class="modal inmodal fade" id="versionHistoryModal" tabindex="-1" role="dialog" >
    <div class="modal-dialog" style="width:80%" >
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">关闭</span>
                </button>
                <h4 class="modal-title">历史版本</h4>
            </div>

            <div class="modal-body" >

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-cancel" data-dismiss="modal"><i
                        class="glyphicon glyphicon-arrow-left"></i>&nbsp;&nbsp;关闭
                </button>

            </div>

        </div>
    </div>
</div>








<?php include "include/admin_foot_script.php" ?>

<script type="text/javascript" src="<?= base_url('assets/js/plugins/jeasyui/jquery.easyui.min.js') ?>"></script>


<script src="<?= base_url('assets/js/plugins/dataTables/jquery.dataTables.js') ?>"></script>
<script src="<?= base_url('assets/js/plugins/dataTables/dataTables.bootstrap.js') ?>"></script>


<script type="text/javascript">




    var pid = <?= $project['id']?>;

    function reload_data() {
        $('#dg').datagrid('reload');
    }

    $(function () {







        init_table();


        $("#versionHistoryModal").on("shown.bs.modal", function () {

        });




        $("input[name='cb_column']").click(function () {

            var column = $(this).val();

            if ($(this).get(0).checked) {
                $('#dg').datagrid(
                    'showColumn', column
                );

            } else {
                $('#dg').datagrid(
                    'hideColumn', column
                );

            }

        });


        $("#btn_key").click(function () {
            window.open("<?= base_url('admin/key/keys?pid=') ?>" + pid, 'KEY', 'fullscreen=1, channelmode= 1,location=0, menubar=no');
        });

        $("#btn_submit_version").click(function () {
            $('#submitversionModal').modal('show');
        });


        // 历史版本
        $("#btn_history_version").click(function () {

            $.get("<?= base_url('admin/version/project_version?pid=') ?>"+pid, function (res) {
                $("#versionHistoryModal .modal-body").html(res);
                $("#versionHistoryModal").modal({keyboard: false, show: true});
            })
        });


        //导出语言
        $("#btn_download").click(function () {
            $('#downloadModal').modal('show');
        });


        var icon = "<i class='fa fa-times-circle'></i> ";



        //提交版本
        $("#submitversion_form").validate({
            rules: {
                vremark: {
                    required: true
                }
            },

            messages: {
                vremark: icon + "请输入版本备注"
            },

            submitHandler: function (form) {

                var vremark = $("#vremark").val();

                if (vremark == "") {
                    parent.layer.msg('请输入版本描述', {shift: 6});
                    return;
                }

                var lang = new Array();
                $("input[name='sub_lang_ids']:checked").each(function (index, element) {

                    var langid = $(this).val();
                    lang.push(
                        langid
                    );
                });


                if (lang.length == 0) {
                    parent.layer.msg('请选择要提交的语言', {shift: 6});
                    return;
                }


                var lang_json = JSON.stringify(lang);


                $.post('<?= base_url("admin/version/submitversion") ?>',
                    {
                        "remark": vremark,
                        'lang_ids': lang_json,
                        'pid': pid
                    }

                    ,
                    function (res) {
                        if (res.code == 200) {
                            $('#submitversionModal').modal('hide');
                            toastr.success("提交版本成功!", '提示');
                        } else {
                            toastr.error(res.msg, '提示');
                        }

                    }, "json");

            }
        });



        $("#downloadModal_form").validate({


            submitHandler: function (form) {


                var lang = new Array();
                $("input[name='download_lang_ids']:checked").each(function (index, element) {

                    var langid = $(this).val();
                    lang.push(
                        langid
                    );
                });


                if (lang.length == 0) {
                    parent.layer.msg('请选择要导出的语言', {shift: 6});
                    return;
                }

               var lang_json = JSON.stringify(lang);
                var tpl_id = $("#tpl_id").val();

                if (tpl_id == "") {
                    parent.layer.msg('请选择导出的模板', {shift: 6});
                    return;
                }

               window.location.href = '<?= base_url("admin/content/export_template") ?>?lang_ids='+lang_json + "&tpl_id="+ tpl_id + "&pid=" + pid;

            }
        });



//        var index = parent.layer.load(1, {
//            shade: [0.1,'#fff'] //0.1透明度的白色背景
//        });



     //   var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2



        
    });
    
    
    function init_table() {

        var grid = $('#dg').datagrid({
            url: '<?= base_url("admin/content/get_edit_data") ?>?pid=<?= $project['id']?>',
            columns: [<?=$columnsjson ?>],
            singleSelect: true,
            onClickCell: onClickCell,
            iconCls: 'icon-edit',
            showHeader: true,
            editorHeight: 50,
            fitColumns: true,
            rownumbers: true,
            fit: true,
            loadMsg: '正在加载数据',


            onEndEdit: function (index, row) {

                var rowJson = JSON.stringify(row);
                $.post("<?= base_url("admin/content/submitcontent") ?>",
                    {
                        "row": rowJson,
                        "pid": pid
                    },


                    function (res) {

                        if (res.code == 200) {
                            // toastr.success("创建成果成功", '提示');
                            //window.location.href = '<?= base_url("admin/project/projects") ?>';
                        } else {

                            alert(res.msg);

                        }

                    }, "json");

            },

            loading:function() {


                // var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2

            },
            onLoadSuccess: function(){
                //  alert("xxxx");
                $('#loadingModal').modal('hide');
            }

        });


    }


    function show_history_version(pvid) {
       // window.location.href = '<?= base_url('admin/content/history_data?pvid=') ?>' + pvid;

       window.open("<?= base_url('admin/content/history_data?pvid=') ?>" + pvid, '-历史版本', 'fullscreen=1, channelmode= 1,location=0, menubar=no');
    }

    $.extend($.fn.datagrid.methods, {

        editCell: function (jq, param) {

            return jq.each(function () {

                var opts = $(this).datagrid('options');

                var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));

                for (var i = 0; i < fields.length; i++) {
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor1 = col.editor;
                    if (fields[i] != param.field) {
                        col.editor = null;
                    }
                }

                $(this).datagrid('beginEdit', param.index);

                for (var i = 0; i < fields.length; i++) {
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor = col.editor1;
                }
            });
        }
    });


    $.extend($.fn.datagrid.defaults.editors, {
        text: {
            init: function (container, options) {
                //var input = $(' <textarea class="datagrid-editable-input" style="vertical-align: middle; height: 50px; width: 189px;"></textarea>').appendTo(container);


                // var textArea = ' <textarea class="datagrid-editable-input" style="vertical-align: middle; height: 50px; width: 189px;"></textarea>';

                return input;
            },
            destroy: function (target) {
                $(target).remove();
            },
            getValue: function (target) {
                return $(target).val();
            },
            setValue: function (target, value) {
                $(target).val(value);


            },
            resize: function (target, width) {
                $(target)._outerWidth(width);
            }
        }
    });


    var editIndex = undefined;
    function endEditing() {


        if (editIndex == undefined) {
            return true
        }
        if ($('#dg').datagrid('validateRow', editIndex)) {
            $('#dg').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    function onClickCell(index, field) {
        if (endEditing()) {
            $('#dg').datagrid('selectRow', index)
                .datagrid('editCell', {index: index, field: field});
            editIndex = index;
        }
    }


    var i = 0;
    function hideColumnText() {

        if (i % 2 == 0) {
            $('#dg').datagrid(
                'hideColumn', 'key'
            );
        } else {

            $('#dg').datagrid(
                'showColumn', 'key'
            );

        }
        i++;
    }
</script>
</body>
</html>